<template>
  <ph-view>
    <ph-blockquote type="primary">对于css3 flex布局的包装</ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="基本用法1">
        <ph-flex dir="col" height="300px">
          <ph-flex
            height="50px"
            flex="0 0 auto"
            bg="var(--ph-primary)"
          ></ph-flex>
          <ph-flex bg="var(--ph-success)"></ph-flex>
          <ph-flex bg="var(--ph-danger)"></ph-flex>
          <ph-flex bg="var(--ph-info)"></ph-flex>
          <ph-flex bg="var(--ph-warning)"></ph-flex>
        </ph-flex>
        <ph-pretty>{{ demo1 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本用法2">
        <ph-flex dir="col" height="300px">
          <ph-flex
            height="50px"
            flex="0 0 auto"
            bg="var(--ph-primary)"
          ></ph-flex>
          <ph-flex>
            <ph-flex height="100%" bg="var(--ph-success)"></ph-flex>
            <ph-flex height="100%" bg="var(--ph-danger)"></ph-flex>
            <ph-flex height="100%" bg="var(--ph-info)"></ph-flex>
            <ph-flex height="100%" bg="var(--ph-warning)"></ph-flex>
          </ph-flex>
          <ph-flex
            height="50px"
            flex="0 0 auto"
            bg="var(--ph-primary)"
          ></ph-flex>
        </ph-flex>
        <ph-pretty>{{ demo2 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本用法3">
        <ph-flex dir="col" height="300px">
          <ph-flex
            height="50px"
            flex="0 0 auto"
            bg="var(--ph-primary)"
          ></ph-flex>
          <ph-flex>
            <ph-flex height="100%" bg="var(--ph-success)"></ph-flex>
            <ph-flex height="100%" dir="col">
              <ph-flex bg="var(--ph-danger)"></ph-flex>
              <ph-flex bg="var(--ph-info)"></ph-flex>
            </ph-flex>
            <ph-flex height="100%" bg="var(--ph-warning)"></ph-flex>
          </ph-flex>
          <ph-flex
            height="50px"
            flex="0 0 auto"
            bg="var(--ph-primary)"
          ></ph-flex>
        </ph-flex>
        <ph-pretty>{{ demo3 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { PhFlex, PhTabPanel, PhTab, PhBlockquote, PhView } from "@/index";
import * as Data from "../data/flex";
export default defineComponent({
  components: { PhFlex, PhTabPanel, PhTab, PhBlockquote, PhView },
  setup() {
    return { ...Data };
  },
});
</script>
